<!-- 园区信息管理 -->

<template>
  <div class="flex flex-col w-full p-10px box-border" style="height: calc(100% - 40px)">
    <!-- card -->
    <div
      class="flex-1 flex flex-col h-100%"
      style="box-shadow: 0px 1px 10px 0px rgba(153, 153, 153, 0.4)"
    >
      <div class="h-50px lh-50px pl-10px pr-40px bg-[#F8F8F8]">
        <span class="text-[#333] text-16px font-bold">园区信息管理</span>
      </div>
      <div class="w-full" style="height: calc(100% - 50px)">
        <!--查询表单 -->
        <el-form
          :inline="true"
          class="m-20px pl-30px border-0 border-b border-solid border-#E0E0E0"
        >
          <el-form-item label="园区名称">
            <el-input v-model="yqmcVal" name="yqmcVal" type="input" ></el-input>
          </el-form-item>
          <el-form-item label="国内/国外">
            <el-select v-model="sfgn" placeholder="请选择是否国内">
              <el-option label="国内" value="1" />
              <el-option label="国外" value="0" />
            </el-select>
          </el-form-item>
          <div class="mt-2px float-right">
            <el-button type="primary" class="w-80px rounded-15px" :icon="Search" @click="loadTableData">查询</el-button>
            <el-button class="w-80px bg-[#dceeff] rounded-15px" :icon="Refresh" @click="resetSearch">重置</el-button>
          </div>
        </el-form>

        <!--表格 -->
        <div class="text-right mr-20px mb-10px">
          <el-button type="primary" class="w-80px rounded-15px" :icon="Plus" @click="add">新增</el-button>
          <el-button type="primary" class="w-80px rounded-15px" :icon="Download" @click="exportExcel">导出</el-button>
        </div>
        <Table
          class="mt-20px"
          style="height: calc(100% - 200px)"
          :table-columns="tableColumns"
          :table-data="tableData"
        >
        
          <template #sfgnColumn="{ row }">
            <span>{{ row.sfgn == 1? "国内": "国外" }}</span>
          </template>
          <template #actionColumn="{ row }">
            <div class="flex justify-center">
              <el-button link type="primary" @click="query(row)">查看</el-button>
              <el-button link type="danger" @click="deleteData">删除</el-button>
            </div>
          </template>
        </Table>

        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          class="justify-end m-10px mt-15px"
          layout="total, sizes, prev, pager, next"
          :total="tableTotal"
          background
        >
        </el-pagination>
      </div>
    </div>
  </div>

  <Dialog :visible="dialogShow" title="详情查看" width="1000px" @close="dialogShow = false">
    <el-form
      v-for="(formItem, formIndex) in dialogFormList"
      :key="formIndex"
      :label-width="formItem.formLabelWidth"
      :model="editForm"
    >
      <el-row :gutter="0">
        <el-col v-for="(item, index) in formItem.formList" :key="index" :span="item.span || 12">
          <el-form-item :label="item.label" v-if="item.prop != 'sfgn'">
            <el-input v-model="editForm[item.prop]" :type="item.type" :disabled="inputDisabled"></el-input>
          </el-form-item>
          <el-form-item label="是否国内" v-if="item.prop == 'sfgn'" required="true">
            <el-select v-model="editForm[item.prop]" placeholder="请选择是否国内"  :disabled="inputDisabled" required="true">
              <el-option label="国内" :value="1" />
              <el-option label="国外" :value="0" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </Dialog>

  <!-- 新增 -->
  <Dialog :visible="dialogAddShow" title="园区新增" width="1000px" @close="close">
    <el-form
      v-for="(formItem, formIndex) in dialogFormList"
      :key="formIndex"
      :label-width="formItem.formLabelWidth"
      :model="addForm"
      :rules="rules"
    >
      <el-row :gutter="0">
        <el-col v-for="(item, index) in formItem.formList" :key="index" :span="item.span || 12">
          <el-form-item :label="item.label" v-if="item.prop != 'sfgn'" :prop="item.prop">
            <el-input v-model="addForm[item.prop]" :type="item.type"></el-input>
          </el-form-item>
          
          <el-form-item label="国内/国外" v-if="item.prop == 'sfgn'" prop="sfgn">
            <el-select v-model="addForm[item.prop]" name="sfgn" placeholder="请选择国内/国外">
              <el-option label="国内" :value="1" />
              <el-option label="国外" :value="0" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="mt-20px text-right">
      <el-button class="w-80px h-40px" @click="close">取消</el-button>
      <el-button type="primary" class="w-80px h-40px" @click="addSave">保存</el-button>
    </div>
  </Dialog>
</template>
<script lang="ts" setup>
import { ElMessageBox, ElMessage } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import { Search, Refresh, Plus, Download } from '@element-plus/icons-vue'
import * as XLSX from 'xlsx'

//搜索参数
const pageNo = ref(1)
const pageSize = ref(10)
let tableTotal = ref(0)
const sfgn = ref('')
const yqmcVal = ref('')

const resetSearch = () => {
  sfgn.value = ''
  yqmcVal.value = ''
  pageNo.value = 1
  pageSize.value = 10

  loadTableData()
}


// 定义列配置
const tableColumns = [
  {
    type: 'index',
    label: '序号',
    width: '80',
  },
  {
    prop: 'yqmc',
    label: '园区名称',
    width: 200,
  },
  {
    slotName: 'sfgnColumn',
    type: 'slot',
    prop: 'sfgn',
    label: '国内/国外',
  },
  {
    prop: 'yqjj',
    label: '园区简介',
  },
  {
    prop: 'qysl',
    label: '企业数量',
  },
  {
    prop: 'cyjj',
    label: '产业简介',
    width: 240,
  },
  {
    prop: 'ndzcz',
    label: '年度总产值',
    width: 200,
  },
  {
    prop: 'zhnhzl',
    label: '综合能耗总量',
  },
  {
    prop: 'dwcznh',
    label: '单位产值能耗',
  },
  {
    prop: 'dwczdh',
    label: '单位产值电耗',
  },
  {
    label: '操作',
    width: '140',
    slotName: 'actionColumn',
    type: 'slot',
    align: 'center',
  },
]
const tableData = ref([])

/** ----- 加载table数据 ----- */
function loadTableData() {
  const params = {
    yqmcVal: yqmcVal.value,
    sfgn: sfgn.value,
    pageNo: pageNo.value,
    pageSize: pageSize.value,
  }

  queryPageYqxx(params).then((res: any) => {
    tableData.value = res.records
    pageNo.value = res.current
    pageSize.value = res.size
    tableTotal.value = res.total
  })
}
loadTableData()

//分页按钮
const handleSizeChange = (val: number) =>{
  console.log(`每页 ${val} 条`);
  pageSize.value = val
  loadTableData()
}
const handleCurrentChange = (val: number) =>{
  console.log(`当前页: ${val}`);
  pageNo.value = val
  loadTableData()
}

//弹窗信息
const dialogShow = ref(false)
const inputDisabled = ref(true)
const dialogFormList = [
  {
    formLabelText: '',
    formLabelWidth: '160px',
    formList: [
      {
        prop: 'yqmc',
        label: '园区名称',
        type: 'input',
        value: '',
      },
      {
        prop: 'sfgn',
        label: '国内/国外',
        type: 'input',
        value: '',
      },
      {
        prop: 'yqjj',
        label: '园区简介',
        type: 'input',
        value: '',
      },
      {
        prop: 'qysl',
        label: '企业数量',
        type: 'input',
        value: '',
      },
      {
        prop: 'cyjj',
        label: '产业简介',
        type: 'input',
        value: '',
      },
      {
        prop: 'ndzcz',
        label: '年度总产值',
        type: 'input',
        value: '',
      },
      {
        prop: 'zhnhzl',
        label: '综合能耗总量',
        type: 'input',
        value: '',
      },
      {
        prop: 'dwcznh',
        label: '单位产值能耗',
        type: 'input',
        value: '',
      },
      {
        prop: 'dwczdh',
        label: '单位产值电耗',
        type: 'input',
        value: '',
      },
    ],
  },
]

//保存校验
const rules = reactive<FormRules>({
  yqmc: [
    { required: true, message: "园区名称不能为空", trigger: "blur" }
  ],
  sfgn: [
    { required: true, message: "是否国内不能为空", trigger: "blur" }
  ],
  qysl: [
    { required: true, message: "企业数量不能为空", trigger: "blur" }
  ],
})


//查询详情
const editForm: any = ref({})
const query = (row: any) => {
  editForm.value = row
  inputDisabled.value = true
  dialogShow.value = true
}

const deleteData = () => {
  ElMessageBox.confirm('暂无权限操作!', '提示', {
    confirmButtonText: '确认',
    type: 'warning',
    showCancelButton: false,
  }).then(() => {})
}

const close = () => {
  //弹出框清空
  dialogFormList[0].formList.forEach((e: any)=>{
    e.value = ''
  })
  addForm.value = {}
  dialogAddShow.value = false
}

const dialogAddShow = ref(false)
const addForm = ref({})
const add = () => {
  //弹出框清空
  dialogFormList[0].formList.forEach((e: any)=>{
    e.value = ''
  })
  addForm.value = {}
  dialogAddShow.value = true
}

const addSave = () => {
  //校验
  let data: any = addForm.value
  if(data.yqmc==undefined||data.yqmc===""){
    ElMessage({message: "新增失败！园区名称不能为空" ,type: 'warning'})
    return
  }
  if(data.sfgn==undefined||data.sfgn===""){
    ElMessage({message: "新增失败！是否国内不能为空" ,type: 'warning'})
    return
  }
  if(data.qysl==undefined||data.qysl===""){
    ElMessage({message: "新增失败！企业数量不能为空不能为空" ,type: 'warning'})
    return
  }

  // data.sfgn = number()
  yqxxInsertOrUpdate(data).then((res: any) => {
    if(res!=null){
      dialogAddShow.value = false
      loadTableData()
      ElMessage({message: '新增成功！',type: 'success'});
    }
  }).catch((error)=>{
    ElMessage({message: "新增失败! " + error?.response?.data?.result?.resultMessage ,type: 'error'})
  })
}

//导出
const exportExcel = async () => {
  let fdArrayList: any = []
  const data = {
    yqmcVal: yqmcVal.value,
    sfgn: sfgn.value,
    pageNo: 1,
    pageSize: 5000,
  }
  await queryPageYqxx(data).then((res: any) => {
    fdArrayList = res.records
  })
  const fdArray: any = []
  fdArrayList.forEach(function (data: any, index: any) {
    const obj = {
      序号: index + 1,
      园区名称: data.yqmc,
      是否国内: data.sfgn,
      园区简介: data.yqjj,
      企业数量: data.qysl,
      产业简介: data.ndzcz,
      年度总产值: data.ndzcz,
      综合能耗总量: data.ndzcz,
      单位产值能耗: data.dwczdh,
      单位产值电耗: data.dwczdh,
    }
    fdArray.push(obj)
  })
  // 新建一个excel.xlsx
  const wb = XLSX.utils.book_new()
  // //封装JSON 数据
  const fdXslxws = XLSX.utils.json_to_sheet(fdArray)
  XLSX.utils.book_append_sheet(wb, fdXslxws, 'sheet')
  XLSX.writeFile(wb, '园区管理' + '.xlsx')
  ElMessage({ message: '导出成功！', type: 'success' })
}
</script>

<style></style>
